html,
body,
div,
span,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
section,
summary,
time,
audio,
video
  padding 0
  margin 0
  border 0

html
  -webkit-text-size-adjust 100%
  -ms-text-size-adjust 100%

body
  position fixed
  top 0
  right 0
  bottom 0
  left 0
  font 14px/1.25 "Helvetica Neue", sans-serif
  color #222
  background-color #fff

a
  color #0882f0
  text-decoration none
  -webkit-tap-highlight-color rgba(0, 0, 0, 0)

.content
  position fixed
  top 0
  right 0
  bottom 0
  left 0
  overflow auto
  background-color #fff
  -webkit-transition-property top, bottom
  transition-property top, bottom
  -webkit-transition-duration .2s, .2s
  transition-duration .2s, .2s
  -webkit-transition-timing-function linear, linear
  transition-timing-function linear, linear
  -webkit-overflow-scrolling touch
  & > *
    -webkit-transform translateZ(0px)
    transform translateZ(0px)
  &.fade
    left 0
    opacity 0
    -webkit-transition opacity .2s ease-in-out
    transition opacity .2s ease-in-out
    &.in
      opacity 1
  &.slide
    -webkit-transform translate3d(0, 0, 0)
    transform translate3d(0, 0, 0)
    -webkit-transition -webkit-transform .25s ease-in-out
    transition transform .25s ease-in-out
    &.left
      -webkit-transform translate3d(-100%, 0, 0)
      transform translate3d(-100%, 0, 0)
    &.right
      -webkit-transform translate3d(100%, 0, 0)
      transform translate3d(100%, 0, 0)

.content-padded
  padding 10px

.bar-title
  top 0
  display -webkit-box
  display box
  background-color #1eb0e9
  background-image -webkit-linear-gradient(top, #1eb0e9 0, #109adc 100%)
  background-image linear-gradient(to bottom, #1eb0e9 0, #109adc 100%)
  border-bottom 1px solid #0e5895
  box-shadow inset 0 1px 1px -1px rgba(255, 255, 255, .8)
  -webkit-box-orient horizontal
  box-orient horizontal
  & ~ .content
    top 44px
  .title
    position absolute
    top 0
    left 0
    display block
    width 100%
    font-size 20px
    font-weight bold
    line-height 44px
    color #fff
    text-align center
    text-shadow 0 -1px rgba(0, 0, 0, .5)
    white-space nowrap
    a
      color inherit
  & > a
    &:not([class*="button"])
      display block
      width 100%
      height 100%
  [class*="button"]
    position relative
    z-index 10
    font-size 12px
    line-height 23px
    color #fff
    text-shadow 0 -1px 0 rgba(0, 0, 0, .3)
    background-color #1eb0e9
    background-image -webkit-linear-gradient(top, #1eb0e9 0, #0984c6 100%)
    background-image linear-gradient(to bottom, #1eb0e9 0, #0984c6 100%)
    border 1px solid #0e5895
    box-shadow 0 1px rgba(255, 255, 255, .25)
    -webkit-box-flex 0
    box-flex 0
  .button
    &:active
      color #fff
      background-color #0876b1
  .button-prev
    margin-left 7px
    border-left 0
    border-bottom-left-radius 10px 15px
    border-top-left-radius 10px 15px
    &:before
      left -5px
      background-image -webkit-gradient(linear, left bottom, right top, from(#0984c6), to(#1eb0e9))
      background-image gradient(linear, left bottom, right top, from(#0984c6), to(#1eb0e9))
      border-left 1.5px solid rgba(255, 255, 255, .25)
      -webkit-transform rotate(-45deg) skew(-10deg, -10deg)
      transform rotate(-45deg) skew(-10deg, -10deg)
    &:active
      &:before
        box-shadow inset 0 3px 3px rgba(0, 0, 0, .2)
  .button-next
    margin-right 7px
    border-right 0
    border-top-right-radius 10px 15px
    border-bottom-right-radius 10px 15px
    &:before
      right -5px
      background-image -webkit-gradient(linear, left bottom, right top, from(#1eb0e9), to(#0984c6))
      background-image gradient(linear, left bottom, right top, from(#1eb0e9), to(#0984c6))
      border-top 1.5px solid rgba(255, 255, 255, .25)
      -webkit-transform rotate(135deg) skew(-10deg, -10deg)
      transform rotate(135deg) skew(-10deg, -10deg)
    &:active
      &:before
        box-shadow inset 0 -3px 3px rgba(0, 0, 0, .2)
  .segmented-controller
    line-height 18px
    text-shadow 0 -1px 0 rgba(0, 0, 0, 0.3)
    background-color #1eb0e9
    background-image -webkit-linear-gradient(top, #1eb0e9 0, #0984c6 100%)
    background-image linear-gradient(to bottom, #1eb0e9 0, #0984c6 100%)
    border 1px solid #0e5895
    border-radius 3px
    box-shadow 0 1px rgba(255, 255, 255, .25)
    -webkit-box-flex 1
    box-flex 1
    li
      border-left 1px solid #0e5895
      box-shadow inset 1px 0 rgba(255, 255, 255, .25)
      &:first-child
        border-left-width 0
      &.active
        background-color #0082c4
        box-shadow inset 0 1px 6px rgba(0, 0, 0, .3)
      & > a
        color #fff

.bar-tab
  bottom 0
  height 50px
  padding 0
  background-color #393939
  background-image -webkit-linear-gradient(top, #393939 0, #2b2b2b 100%)
  background-image linear-gradient(to bottom, #393939 0, #2b2b2b 100%)
  border-top 1px solid #000
  border-bottom-width 0
  box-shadow inset 0 1px 1px -1px rgba(255, 255, 255, .6)
  & ~ .content
    bottom 51px

.bar-header-secondary
  top 45px
  & ~ .content
    top 88px

[class*="bar-"]
  position fixed
  right 0
  left 0
  z-index 10
  height 44px
  padding 5px
  box-sizing border-box
  .segmented-controller
    margin-bottom 0

.bar-footer
  bottom 0

.bar-standard
  background-color #f2f2f2
  background-image -webkit-linear-gradient(top, #f2f2f2 0, #e5e5e5 100%)
  background-image linear-gradient(to bottom, #f2f2f2 0, #e5e5e5 100%)
  border-bottom 1px solid #aaa
  box-shadow inset 0 1px 1px -1px #fff
  input[type=search]
    height 32px
    margin 0

.bar-footer.bar-standard,
.bar-footer-secondary.bar-standard
  border-top 1px solid #aaa
  border-bottom-width 0

.tab-inner
  display -webkit-box
  display box
  height 100%
  list-style none
  -webkit-box-orient horizontal
  box-orient horizontal

.tab-item
  height 100%
  padding-top 9px
  text-align center
  box-sizing border-box
  -webkit-box-flex 1
  box-flex 1
  &.active
    box-shadow inset 0 0 20px rgba(0, 0, 0, .5)

.tab-icon
  display block
  height 18px
  margin 0 auto

.tab-label
  margin-top 1px
  font-size 10px
  font-weight bold
  color #fff
  text-shadow 0 1px rgba(0, 0, 0, .3)

.bar-title .title + [class*="button"]:last-child,
.bar-title .button + [class*="button"]:last-child,
.bar-title [class*="button"].pull-right
  position absolute
  top 5px
  right 5px

.bar-title .button-prev,
.bar-title .button-next
  position relative

.bar-title .button-prev:before,
.bar-title .button-next:before
  position absolute
  top 2px
  width 27px
  height 27px
  border-radius 30px 100px 2px 40px / 2px 40px 30px 100px
  content ''
  box-shadow inset 1px 0 #0e5895, inset 0 1px #0e5895
  -webkit-mask-image -webkit-gradient(linear, left top, right bottom, from(#000), color-stop(.33, #000), color-stop(.5, transparent), to(transparent))
  mask-image gradient(linear, left top, right bottom, from(#000), color-stop(.33, #000), color-stop(.5, transparent), to(transparent))

.bar-title .button-prev:active,
.bar-title .button-next:active,
.bar-title .button-prev:active:before,
.bar-title .button-next:active:before
  color #fff
  background-color #0876b1
  background-image none

.bar-title .button-prev:active:before,
.bar-title .button-next:active:before
  content ''

[class*="bar"]
  .button-block
    padding 7px 0
    margin-bottom 0
    box-shadow inset 0 1px 1px rgba(255, 255, 255, .4), 0 1px rgba(255, 255, 255, .8)
    &:active
      padding 7px 0

[class*="bar-"] .segmented-controller + [class*="button"],
[class*="bar-"] [class*="button"] + .segmented-controller
  margin-left 5px

.bar-title .segmented-controller .active + li,
.bar-title .segmented-controller li:first-child
  box-shadow none

.list
  margin-bottom 10px
  list-style none
  background-color #fff
  li
    position relative
    padding 11px 60px 11px 10px
    border-bottom 1px solid rgba(0, 0, 0, .1)
    &:first-child
      border-top 1px solid rgba(0, 0, 0, .1)
    & > a
      &:not([class*="button"])
        position relative
        display block
        padding inherit
        margin -11px -60px -11px -10px
        color inherit
  &.inset
    width auto
    margin-right 10px
    margin-left 10px
    border 1px solid rgba(0, 0, 0, .1)
    border-radius 6px
    box-sizing border-box
    li
      &:first-child
        border-top-width 0
      &:last-child
        border-bottom-width 0
    .list-divider
      &:first-child
        top 0
        border-top-width 0
        border-radius 6px 6px 0 0
      &:last-child
        border-radius 0 0 6px 6px
  .list-divider
    position relative
    top -1px
    padding-top 6px
    padding-bottom 6px
    font-size 12px
    font-weight bold
    line-height 18px
    text-shadow 0 1px 0 rgba(255, 255, 255, .5)
    background-color #f8f8f8
    background-image -webkit-linear-gradient(top, #f8f8f8 0, #eee 100%)
    background-image linear-gradient(to bottom, #f8f8f8 0, #eee 100%)
    border-top 1px solid rgba(0, 0, 0, .1)
    border-bottom 1px solid rgba(0, 0, 0, .1)
    box-shadow inset 0 1px 1px rgba(255, 255, 255, .4)
  .chevron
    & + [class*="count"]
      right 30px
  [class*="button"]
    left auto
    margin-top -14px
  .toggle
    margin-top -15px

.list .chevron,
.list [class*="button"],
.list [class*="count"],
.list .toggle
  position absolute
  top 50%
  right 10px

.list .chevron,
.list [class*="count"]
  margin-top -10px

input,
textarea,
button,
select
  font-family inherit
  font-size inherit

select,
textarea,
input[type="text"],
input[type=search],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="color"],
.input-group
  width 100%
  height 40px
  padding 10px
  margin-bottom 10px
  background-color #fff
  border 1px solid rgba(0, 0, 0, .2)
  border-radius 3px
  box-shadow 0 1px 1px rgba(255, 255, 255, .2), inset 0 1px 1px rgba(0, 0, 0, .1)
  -webkit-appearance none
  box-sizing border-box
  outline none

input[type=search]
  height 34px
  font-size 14px
  border-radius 30px

textarea
  height auto

select
  height auto
  font-size 14px
  background-color #f8f8f8
  background-image -webkit-linear-gradient(top, #f8f8f8 0%, #d4d4d4 100%)
  background-image linear-gradient(to bottom, #f8f8f8 0%, #d4d4d4 100%)
  box-shadow inset 0 1px 1px rgba(0, 0, 0, .1)

.input-group
  width auto
  height auto
  padding 0
  input
    margin-bottom 0
    background-color transparent
    border 0
    border-bottom 1px solid rgba(0, 0, 0, .2)
    border-radius 0
    box-shadow none
    &:last-child
      border-bottom-width 0

.input-row
  overflow hidden
  border-bottom 1px solid rgba(0, 0, 0, .2)
  &:last-child
    border-bottom-width 0
  label
    float left
    width 25%
    padding 11px 10px 9px 13px
    font-weight bold
    & + input
      float right
      width 65%
      padding-left 0
      margin-bottom 0
      border-bottom 0

[class*="button"]
  position relative
  display inline-block
  padding 4px 12px
  margin 0
  font-weight bold
  line-height 18px
  color #333
  text-align center
  text-shadow 0 1px 0 rgba(255, 255, 255, 0.5)
  vertical-align top
  cursor pointer
  background-color #f8f8f8
  background-image -webkit-linear-gradient(top, #f8f8f8 0, #d4d4d4 100%)
  background-image linear-gradient(to bottom, #f8f8f8 0, #d4d4d4 100%)
  border 1px solid rgba(0, 0, 0, .3)
  border-radius 3px
  box-shadow inset 0 1px 1px rgba(255, 255, 255, .4), 0 1px 2px rgba(0, 0, 0, .05)
  [class*="count"]
    padding-top 2px
    padding-bottom 2px
    margin-right -4px
    margin-left 4px
    text-shadow none
    background-color rgba(0, 0, 0, .2)
    box-shadow inset 0 1px 1px -1px #000000, 0 1px 1px -1px #fff

[class*="button"]:active
  padding-top 5px
  padding-bottom 3px
  color #333
  background-color #ccc
  background-image none
  box-shadow inset 0 3px 3px rgba(0, 0, 0, .2)

.button-main,
.button-positive,
.button-negative
  color #fff
  text-shadow 0 -1px 0 rgba(0, 0, 0, .3)

.button-main
  background-color #1eafe7
  background-image -webkit-linear-gradient(top, #1eafe7 0, #1a97c8 100%)
  background-image linear-gradient(to bottom, #1eafe7 0, #1a97c8 100%)
  border 1px solid #117aaa
  &:active
    background-color #0876b1

.button-positive
  background-color #34ba15
  background-image -webkit-linear-gradient(top, #34ba15 0, #2da012 100%)
  background-image linear-gradient(to bottom, #34ba15 0, #2da012 100%)
  border 1px solid #278f0f
  &:active
    background-color #298f11

.button-negative
  background-color #e71e1e
  background-image -webkit-linear-gradient(top, #e71e1e 0,#c71a1a 100%)
  background-image linear-gradient(to bottom, #e71e1e 0, #c71a1a 100%)
  border 1px solid #b51a1a
  &:active
    background-color #b21a1a

.button-main:active,
.button-positive:active,
.button-negative:active
  color #fff

.button-block
  display block
  padding 11px 0 13px
  margin-bottom 10px
  font-size 16px
  &:active
    padding 12px 0
  [class*="count"]
    position absolute
    right 0
    padding-top 4px
    padding-bottom 4px
    margin-right 10px

button
  &.button-block
    width 100%

.chevron
  display block
  height 20px
  &:before
    top 5px
    -webkit-transform rotate(45deg)
    transform rotate(45deg)
  &:after
    top 7px
    -webkit-transform rotate(-45deg)
    transform rotate(-45deg)

.chevron:before,
.chevron:after
  position relative
  display block
  width 12px
  height 4px
  background-color #999
  content ''

[class*="count"]
  display inline-block
  padding 4px 9px
  font-size 12px
  font-weight bold
  line-height 13px
  color #fff
  background-color rgba(0, 0, 0, .3)
  border-radius 100px

.count-main,
.count-positive,
.count-negative
  color #fff
  text-shadow 0 -1px 0 rgba(0, 0, 0, .3)

.count-main
  background-color #1eafe7
  background-image -webkit-linear-gradient(top, #1eafe7 0, #1a97c8 100%)
  background-image linear-gradient(to bottom, #1eafe7 0, #1a97c8 100%)

.count-positive
  background-color #34ba15
  background-image -webkit-linear-gradient(top, #34ba15 0, #2da012 100%)
  background-image linear-gradient(to bottom, #34ba15 0, #2da012 100%)

.count-negative
  background-color #e71e1e
  background-image -webkit-linear-gradient(top, #e71e1e 0,#c71a1a 100%)
  background-image linear-gradient(to bottom, #e71e1e 0, #c71a1a 100%)

.segmented-controller
  display -webkit-box
  display box
  margin-bottom 10px
  overflow hidden
  font-size 12px
  font-weight bold
  text-shadow 0 1px rgba(255, 255, 255, .5)
  list-style none
  background-color #f8f8f8
  background-image -webkit-linear-gradient(top, #f8f8f8 0, #d4d4d4 100%)
  background-image linear-gradient(to bottom, #f8f8f8 0, #d4d4d4 100%)
  border 1px solid #aaa
  border-radius 3px
  box-shadow inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(255, 255, 255, .8)
  -webkit-box-orient horizontal
  box-orient horizontal
  li
    overflow hidden
    text-align center
    white-space nowrap
    border-left 1px solid #aaa
    box-shadow inset 1px 0 rgba(255, 255, 255, .5)
    -webkit-box-flex 1
    box-flex 1
    & > a
      display block
      padding 8px 16px
      overflow hidden
      line-height 15px
      color #333
      text-overflow ellipsis
    &:first-child
      border-left-width 0
      box-shadow none
    &.active
      background-color #ccc
      box-shadow inset 0 1px 5px rgba(0, 0, 0, .3)

.segmented-controller-item
  display none
  &.active
    display block

.popover
  position fixed
  top 55px
  left 50%
  z-index 20
  display none
  width 280px
  padding 5px
  margin-left -146px
  background-color #555
  background-image -webkit-linear-gradient(top, #555 5%, #555 6%, #111 30%)
  background-image linear-gradient(to bottom, #555 5%, #555 6%,#111 30%)
  border 1px solid #111
  border-radius 6px
  opacity 0
  box-shadow inset 0 1px 1px -1px #fff, 0 3px 10px rgba(0, 0, 0, .3)
  -webkit-transform translate3d(0, -15px, 0)
  transform translate3d(0, -15px, 0)
  -webkit-transition -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out
  transition transform 0.2s ease-in-out, opacity 0.2s ease-in-out
  &:before
    top -20px
    margin-left -21px
    border-right 21px solid transparent
    border-bottom 21px solid #111
    border-left 21px solid transparent
  &:after
    top -19px
    margin-left -20px
    border-right 20px solid transparent
    border-bottom 20px solid #555
    border-left 20px solid transparent
  &.visible
    opacity 1
    -webkit-transform translate3d(0, 0, 0)
    transform translate3d(0, 0, 0)
  .button-block
    margin-bottom 5px
    border 1px solid #111
    &:last-child
      margin-bottom 0
  .list
    width auto
    max-height 250px
    margin-right 0
    margin-bottom 0
    margin-left 0
    overflow auto
    background-color #fff
    border 1px solid #000
    border-radius 3px
    -webkit-overflow-scrolling touch

.popover:before,
.popover:after
  position absolute
  left 50%
  width 0
  height 0
  content ''

.popover-header
  display -webkit-box
  display box
  height 34px
  margin-bottom 5px
  .title
    position absolute
    top 0
    left 0
    width 100%
    margin 15px 0
    font-size 16px
    font-weight bold
    line-height 12px
    color #fff
    text-align center
    text-shadow 0 -1px rgba(0, 0, 0, .5)
  [class*="button"]
    z-index 25
    font-size 12px
    line-height 22px
    color #fff
    text-shadow 0 -1px 0 rgba(0, 0, 0, .3)
    background-color #454545
    background-image -webkit-linear-gradient(top, #454545 0, #353535 100%)
    background-image linear-gradient(to bottom, #454545 0, #353535 100%)
    border 1px solid #111
    -webkit-box-flex 0
    box-flex 0
  .button
    &:active
      color #fff
      background-color #0876b1

.popover-header .title + [class*="button"]:last-child,
.popover-header .button + [class*="button"]:last-child,
.popover-header [class*="button"].pull-right
  position absolute
  top 5px
  right 5px

.backdrop
  position fixed
  top 0
  right 0
  bottom 0
  left 0
  z-index 10

.modal
  position fixed
  top 0
  opacity 0
  z-index 11
  width 100%
  min-height 100%
  overflow hidden
  background-color #fff
  -webkit-transform translate3d(0, 100%, 0)
  transform translate3d(0, 100%, 0)
  -webkit-transition -webkit-transform .25s ease-in-out, opacity 1ms .25s
  transition transform .25s ease-in-out, opacity 1ms .25s
  &.active
    opacity 1
    height 100%
    -webkit-transition -webkit-transform .25s ease-in-out
    transition transform .25 ease-in-out
    -webkit-transform translate3d(0, 0, 0)
    transform translate3d(0, 0, 0)

.slider,
.slider > li
  width 100%
  height 200px

.slider
  overflow hidden
  background-color #000
  & > ul
    position relative
    font-size 0
    white-space nowrap
    -webkit-transition all 0 linear
    transition all 0 linear
    & > li
      display inline-block
      vertical-align top
      width 100%
      height 100%
      & > *
        font-size 14px

.toggle
  position relative
  width 75px
  height 28px
  background-color #eee
  border 1px solid #bbb
  border-radius 20px
  box-shadow inset 0 0 4px rgba(0, 0, 0, .1)
  &:before
    position absolute
    right 13px
    font-weight bold
    line-height 28px
    color #777
    text-shadow 0 1px #fff
    text-transform uppercase
    content "Off"
  &.active
    background-color #19a8e4
    background-image -webkit-linear-gradient(top, #088cd4 0, #19a8e4 100%)
    background-image linear-gradient(to bottom, #088cd4 0, #19a8e4 100%)
    border 1px solid #096c9d
    box-shadow inset 0 0 15px rgba(255, 255, 255, .25)
    .toggle-handle
      border-color #0a76ad
      -webkit-transform translate3d(48px,0,0)
      transform translate3d(48px,0,0)
    &:before
      right auto
      left 15px
      color #fff
      text-shadow 0 -1px rgba(0, 0, 0, 0.25)
      content "On"

.toggle-handle
  position absolute
  top -1px
  left -1px
  z-index 2
  width 28px
  height 28px
  background-color #fff
  background-image -webkit-linear-gradient(top, #fff 0, #f2f2f2 100%)
  background-image linear-gradient(to bottom, #fff 0, #f2f2f2 100%)
  border 1px solid rgba(0, 0, 0, .2)
  border-radius 100px
  -webkit-transition -webkit-transform 0.1s ease-in-out, border 0.1s ease-in-out
  transition transform 0.1s ease-in-out, border 0.1s ease-in-out

